<template>
  <div class="zlwork">
    <div>
      <img style="width: 100%;" src="../../assets/banner/new_banner_process_5.png"/>
    </div>
    <div class="zlwork-tj">
      <div class="zlwork-tj-title">辅助疗护统计</div>
      <div ref="lineChart" class="zlwork-chart"></div>
    </div>
    <div class="zlwork-main">
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="(item, index) in reportList" :key="item.id" :name="index"
                           :title="item.createDay + '记录'" :title-class="index == 0 ? 'zlwork-main-title' : ''">
          <div class="flex flex-between align-center advise">
            <div class="advise-title">心里评分分析</div>
            <div class="flex flex-right align-center advise-star">
              <van-rate
                  v-model="item.baseProcessDataJson.analysisOfMind.score"
                  allow-half
                  void-icon="star"
                  color="#ffd21e"
                  readonly
                  void-color="#eee"/>
              <span class="advise-star-span">{{ item.baseProcessDataJson.analysisOfMind.score*20 }}分</span>
            </div>
          </div>
          <div class="zlwork-main-jy">
            <van-field
                v-model="item.baseProcessDataJson.analysisOfMind.recordContent"
                rows="2"
                autosize
                type="textarea"
                disabled
                :border="false"
                placeholder="待医生输入"
            />
          </div>
          <div class="flex flex-between align-center advise">
            <div class="advise-title">疼痛评分分析</div>
            <div class="flex flex-right align-center advise-star">
              <van-rate
                  v-model="item.baseProcessDataJson.analysisOfPain.score"
                  allow-half
                  void-icon="star"
                  color="#ffd21e"
                  readonly
                  void-color="#eee"
                  placeholder="待医生输入"
              />
              <span class="advise-star-span">{{ item.baseProcessDataJson.analysisOfPain.score*20 }}分</span>
            </div>
          </div>
          <div class="zlwork-main-jy">
            <van-field
                v-model="item.baseProcessDataJson.analysisOfPain.recordContent"
                rows="2"
                autosize
                type="textarea"
                :border="false"
                disabled
                placeholder="待医生输入"
            />
          </div>
          <div class="flex flex-between align-center advise">
            <div class="advise-title">营养评分分析</div>
            <div class="flex flex-right align-center advise-star">
              <van-rate
                  v-model="item.baseProcessDataJson.analysisOfNutrition.score"
                  allow-half
                  void-icon="star"
                  color="#ffd21e"
                  readonly
                  void-color="#eee"
                  placeholder="待医生输入"
              />
              <span class="advise-star-span">{{ item.baseProcessDataJson.analysisOfNutrition.score*20 }}分</span>
            </div>
          </div>
          <div class="zlwork-main-jy">
            <van-field
                v-model="item.baseProcessDataJson.analysisOfNutrition.recordContent"
                rows="2"
                autosize
                type="textarea"
                :border="false"
                disabled
                placeholder="待医生输入"
            />
          </div>
          <div class="flex flex-between align-center advise">
            <div class="advise-title">医生建议</div>
          </div>
          <div class="zlwork-main-jy">
            <van-field
                v-model="item.baseProcessDataJson.suggestOfDoctor"
                rows="2"
                autosize
                disabled
                type="textarea"
                placeholder="待医生输入"
            />
          </div>
          <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }">以上是医生录入内容</van-divider>
          <div class="flex flex-between align-center advise">
            <div class="advise-title">患者反馈</div>
            <div class="flex flex-right align-center advise-r" v-if="index == 0">
              <span>选择标签：</span>
              <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end" @select="onSelect(item.baseProcessDataJson.suggestToDoctor,$event)">
                <template #reference>
                  <van-button type="primary" color="#42DDA2" size="small" class="tag-btn">
                    {{ item.baseProcessDataJson.suggestToDoctor.tagValue || "请选择标签" }}
                  </van-button>
                </template>
              </van-popover>
            </div>
          </div>
          <div class="zlwork-main-jy">
            <van-field
                v-model="item.baseProcessDataJson.suggestToDoctor.content"
                rows="2"
                autosize
                type="textarea"
                placeholder="请输入反馈内容"
            />
          </div>
          <div class="flex flex-between align-center zlwork-main-btn">
            <van-button type="primary" style="width:100%" color="#42DDA2" :loading="isLoading" @click="saveFunc(item)">
              提交反馈
            </van-button>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {queryNewReport, saveProcessOne, queryDic} from '@/api'

export default {
  name: 'Workbench',
  data() {
    return {
      activeNames: [0],
      reportList: [],
      isLoading: false,
      nowDate: '',
      actions: [],
      showPopover:false,
    }
  },
  created() {
    this.patientId = this.$route.query.userid;
    this.processId = this.$route.query.processid;
    this.patientInfo = JSON.parse(sessionStorage.getItem('patientInfo'));
    this.$nextTick(() => {
      this.queryNewReportFunc();
      this.queryDicFunc()
    })
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    // 获取反馈标签
    queryDicFunc() {
      queryDic('userFeedBackTag').then(res => {
        let arr = res.data;
        arr.forEach(item => {
          let aJson = {
            key: item.itemKey,
            text: item.itemValue
          }
          this.actions.push(aJson)
        })
      })
    },
    // 打开标签
    onSelect(suggestToDoctor, action) {
      suggestToDoctor.tagValue = action.text;
      suggestToDoctor.tag = action.key;
    },
    initEcharts() {
      let myChart = echarts.init(this.$refs.lineChart)
      let option = {
        legend: {
        },
        xAxis: {
          type: 'category',
          data: ['10.11', '10.12', '10.13', '10.14', '10.15', '10.20', '10.24']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: "不良反应记录1",
          data: [100, 90, 50, 90, 30, 70, 95],
          type: 'line',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }, {
          name: "不良反应记录2",
          data: [70, 86, 79, 90, 99, 92, 80],
          type: 'line',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }, {
          name: "不良反应记录3",
          data: [10, 39, 79, 97, 60, 66, 20],
          type: 'line',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
        ]
      }
      myChart.setOption(option)
    },
    // 获取前十条数据
    queryNewReportFunc() {
      let data = 'processId=' + this.processId + '&userId=' + this.patientId;
      queryNewReport(data).then(res => {
        console.log('数据', res.data);
        this.reportList = res.data;
      })
    },
    // 保存化疗方案
    saveFunc(item) {
      let data = {
        userId: this.patientId,
        processId: this.processId,
        processData: JSON.stringify(item.baseProcessDataJson),
        createDay:item.createDay,
        id: item.id | null
      }
      this.isLoading = true;
      saveProcessOne(data).then(res => {
        console.log('res', res)
        this.$toast('保存成功！');
        this.isLoading = false
        this.queryNewReportFunc();
      }).catch(() => {
        this.isLoading = false
      })
    }
  }

}
</script>

<style scoped>
.zlwork {
  width: auto;
  height: auto;
  padding: 0px 0px;
  background-color: #f1f1f1;
}
.zlwork-tj{
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color: #fff;
}
.zlwork-tj-title{
  width: 100%;
  height: auto;
  color: #333;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding: 10px 0px 0px;
}
.zlwork-main {
  width: auto;
  height: auto;
  padding: 0px 0px;
}

.zlwork-chart {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}

/deep/ .zlwork-main-title {
  width: 100%;
  height: auto;
  color: #1989fa;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.advise {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.advise-title {
  width: auto;
  height: auto;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.advise-star {
  width: auto;
  height: auto;
  flex: 1;
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

.advise-star-span {
  display: block;
  width: 40px;
  margin-left: 10px;
}

.zlwork-main-jy {
  width: 100%;
  height: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ececec;
  background-color: #ececec;
}

.zlwork-main-btn {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
</style>
